<template>
  <div class="inform">
    <div class="inform-main">
      <div class="inform-tag" :style="{ backgroundColor: informItem.bgcolor }"></div>
      <el-time-select
        class="inform-item"
        v-model="props.informItem.time"
        style="width: 120px"
        start="00:00"
        step="00:05"
        end="23:55"
        placeholder="闹钟时间"
        :disabled="!izEdit"
      />
      <el-input
        class="inform-item"
        v-model="props.informItem.content"
        style="width: 300px"
        placeholder="提醒内容"
        :disabled="!izEdit"
      />
      <div class="inform-block"></div>
      背景色：<el-color-picker
        class="inform-item"
        v-model="props.informItem.bgcolor"
        :disabled="!izEdit"
      />
      <div class="inform-block"></div>
      字体颜色：<el-color-picker
        class="inform-item"
        v-model="props.informItem.color"
        :disabled="!izEdit"
      />
      <div class="inform-empty"></div>
      <EditSquareButton width="50px" height="100%" @click="openEdit()" v-show="!izEdit"/>
      <OkWSquareButton width="50px" height="100%" @click="finishEdit()" v-show="izEdit"/>
      <DeleteSquareButton width="50px" height="100%" @click="deleteSubmit()"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { informTypes } from '@globalTypes/global'
import DeleteSquareButton from '@renderer/components/button/DeleteSquareButton.vue'
import EditSquareButton from '@renderer/components/button/EditSquareButton.vue'
import OkWSquareButton from '@renderer/components/button/OkWSquareButton.vue'
import { ElMessageBox } from 'element-plus'
import { useInformStore } from '@renderer/stores/informStore'

interface Props {
  informItem: informTypes.InformItem
}
const props = defineProps<Props>()

// 是否进入编辑状态
const izEdit = ref(false)

const informStore = useInformStore()

// 开始编辑
function openEdit() {
  izEdit.value = true
}

// 编辑完成
function finishEdit(){
  izEdit.value = false
}

// 提示是否删除
function deleteSubmit() {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error',
    center: true
  }).then(() => {
    console.log('删除成功')
    informStore.deleteInform(props.informItem.id)
  }).catch(() => {
    console.log('取消删除')
  })
}
</script>

<style lang="scss" scoped>
.inform {
  width: 100%;
  height: 80px;
  padding: 5px;
  padding-right: 10px;

  .inform-main {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 10px;

    .inform-tag {
      height: 100%;
      width: 10px;
    }

    .inform-item {
      height: 32px;
      line-height: 24px;
      min-height: 32px;
      margin-left: 10px;
    }

    .inform-block {
      height: 32px;
      width: 10px;
    }

    .inform-empty {
      flex: 1;
    }
  }
}
</style>
